<template>
  <div class="homeTopCenter">
    <div class="homeTopCenter-top">
      <li>
          <NumRunning   
            :numbers="Number(todayUploadData)"></NumRunning>
        <!-- <h3>
          {{ todayUploadData }}
          <span>条</span>
        </h3> -->
        <div class="btn">
          <button>上传总数据</button>
        </div>
      </li>
      <li>
        <NumRunning   
            :numbers="Number(todayAbnormalData)"></NumRunning>
        <!-- <h3> {{ todayAbnormalData }}
          <span>条</span>
        </h3> -->
        <div class="btn">
          <button>异常总数据</button>
        </div>
      </li>
    </div>
    <!-- 预留地图区域 -->
    <div class="homeTopCenter-bottom">
      <!-- <img src="../../assets/img/global.gif" width="500px" alt=""> -->
    </div>
  </div>
</template>

<script>
import NumRunning from '@/components/NumRunning.vue'
export default {
  components: { NumRunning },
  props: ['todayDataTotal'],
  data(){
    return {
      todayUploadData: null,
      todayAbnormalData: null
    }
  },
  watch:{
    todayDataTotal: {
      handler(val){
        // console.log("today:", val);
        this.todayUploadData = val.toDayTotal; //今日上传数据
        this.todayAbnormalData = val.warningData; //今日异常数据
      },
      deep:true,
      immediate: true
    },
  }
}
</script>

<style scoped>
  .homeTopCenter{
    width: 100%;
    height: 100%;
    /* background: url("../../assets/img/map.png") no-repeat; */
    background-size: 100% 100%;
  }
  .homeTopCenter-top{
    display: flex;
    margin-bottom: 32px;
  }
  .homeTopCenter-top li{
    width: 50%;
    height: 141px;
    list-style-type: none;
    /* background-color: #141F3B; */
    background: url("../../assets/img/today.png") no-repeat;
    background-size: 100% 100%;
    margin-right: 23px;
    padding: 20px 0;
  }
  .homeTopCenter-top li:nth-last-child(1){
    margin-right: 0px;
  }
  /* .homeTopCenter-top li h3{
    height: 34px;
    font-size: 42px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #58DBFF;
    line-height: 0px;
    text-align: center;
  } */
  /* .homeTopCenter-top li h3 span{
    font-size: 23px;
  } */
  .homeTopCenter-top li .btn{
    text-align: center;
    position: relative;
    /* top: -22px; */
  }
  .homeTopCenter-top li .btn button{
    width: 135px;
    height: 28px;
    background: linear-gradient(90deg, #006AE1, #16B7FF);
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    border-radius: 4px;
    border: none;
  }

  .homeTopCenter-top li:nth-child(2) .btn button{
    background: linear-gradient(90deg, #FC5659, #FDB146);
  }

  /* 预留地图区域  */
  .homeTopCenter-bottom{
    height: 445px;
    /* background: url("../../assets/img/global.gif") no-repeat; */
  }
</style>
